<template>
  <div class="login-page">
    <van-nav-bar
      title="账号登录"
      left-arrow
      class="formtop"
      @click-left="onClickLeft"
    />
    <br />
    <van-form @submit="onSubmit">
      <van-field
        label-width="50px"
        v-model="username"
        name="username"
        placeholder="请输入账号"
        :rules="[{ required: true, message: '请输入账号' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        placeholder="请输入密码"
        :rules="[{ required: true, message: '请输入密码' }]"
      />
      <div style="margin: 25px;loading-size=30px">
        <van-button block type="primary" native-type="submit" size="large"
          >登录</van-button
        >
      </div>
    </van-form>
    <router-link to="/register" class="link">还没有账号，去注册~</router-link>
  </div>
</template>

<script>
import { enter } from "@/api/user";
import { setToken } from "@/utils/storage";
export default {
  name: "login-page",
  data() {
    return {
      username: "zzc",
      password: "123456",
    };
  },
  methods: {
    async onSubmit(values) {
      const data = await enter(values);
      console.log(data);
      this.$toast.success(data.description);
      setToken(data.body.token);
      this.$router.push("/article");
    },
    onClickLeft() {
      this.$router.push("/");
    },
  },
};
</script>

<style lang="less">
// .link {
//   color: #069;
//   font-size: 14px;
//   padding-right: 120px;
//   float: right;
// }
// .van-nav-bar__title {
//   font-size: 18px !important;
//   color: #fff !important;
// }
// .van-nav-bar__content {
//   background-color: rgb(4, 138, 255);
// }
// .van-icon-arrow-left:before {
//   color: #fff;
// }
// .van-cell {
//   height: 60px;
//   border-bottom: 1px solid rgb(235, 233, 233);
//   padding-top: 25px !important;
// }
// .van-field__control {
//   font-size: 17px;
// }
// .van-button::before {
//   height: 50px !important;
// }
</style>
